<template>
    <div class='categories'>
        <!-- 面包屑 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>
        <div style="margin-top: 15px;">
            <el-button type="success" plain @click="showAddDialog">添加分类</el-button>
        </div>
        <!-- 树形图的数据 -->
        <!-- <template slot-scope="scope"> -->
        <tree-grid
        :treeStructure="true"
        :columns="columns"
        :data-source="dataSource"
        @deleteCate="deleteCategory"
        @editCate="editCategory">
        </tree-grid>
        <!-- </template> -->
        <!-- 数据分类 -->
        <el-pagination
        class='user-page'
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="1"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
        <!-- 添加分类的对话框 -->
        <el-dialog title="职位分配" :visible.sync="addDialogFormVisible">
            <el-form :model="addform" label-width="100px">
                <el-form-item label="分类名称:">
                <el-input v-model="addform.cat_name" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="父级名称:">
                    <el-cascader
                        :options="catelist"
                        v-model="selectedOptions"
                        @change="handleChange"
                        :props='cascaderProps'
                        change-on-select>
                    </el-cascader>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addDialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addUserSubmit">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 编辑分类的对话框 -->
         <el-dialog title="职位分配" :visible.sync="editDialogFormVisible">
            <el-form :model="editform" label-width="100px" ref='editform'>
                <el-form-item label="分类名称:">
                <el-input v-model="editform.cat_name" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editDialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="editUserSubmit('editform')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import TreeGrid from '@/components/TreeGrid/TreeGrid.vue'
import {getCategories, addCategories, deleteCategories, editCategories, editCategorieslist} from '@/api/index.js'
export default {
// 引入自定义组件.因为当前文件已经是一个组件,所有通过components属性来引入自定义组件
  components: {
    TreeGrid
  },
  data () {
    return {
      // 树形图的数据
      dataSource: [],
      columns: [{
        text: '分类名称',
        dataIndex: 'cat_name',
        width: ''
      }, {
        text: '是否有效',
        dataIndex: 'cat_deleted',
        width: ''
      }, {
        text: '排序',
        dataIndex: 'cat_level',
        width: ''
      }],
      addDialogFormVisible: false,
      // 这里面存储着我们当前所选择的父级分类数据(id)
      selectedOptions: [],
      // 存储选择器的数据
      catelist: [],
      addform: {
        cat_name: '',
        cat_pid: '',
        cat_level: ''
      },
      cascaderProps: {
        // children默认就是children
        children: 'children',
        // label就是获取要显示的值
        label: 'cat_name',
        // value就是要获取的id值,不显示
        value: 'cat_id'
      },
      // 分类页面
      total: 0,
      pagenum: 1,
      pagesize: 10,
      editDialogFormVisible: false,
      editform: {
        cat_name: ''
      }
    }
  },
  methods: {
    //   0.初始化数据
    initList () {
      getCategories({type: 3, pagenum: this.pagenum, pagesize: this.pagesize})
        .then((res) => {
          // console.log(res)
          if (res.meta.status === 200) {
            this.dataSource = res.data.result
            this.total = res.data.total
          }
        })
    },
    // 1.显示添加分类对话框
    showAddDialog () {
      this.addDialogFormVisible = true
      getCategories({type: 2})
        .then((res) => {
          // console.log(res)
          if (res.meta.status === 200) {
            this.catelist = res.data
          }
        })
    },
    // 当级联菜单选项发送改变的时候触发
    // 在这里可以获取当前所选择的分类的id,这个id就是添加分类时所需要的父级id
    handleChange (value) {
      // console.log(value)
      // this.addform.cat_pid = value
      // console.log(this.addform.cat_pid)
    },
    // 2.实现添加分类
    addUserSubmit () {
      // console.log(this.selectedOptions)
      // console.log(this.addform)
      // 判断:如果this.selectedOptions.length 等于 0 的话
      // cat_level分类层级   cat_pid分类父ID
      if (this.selectedOptions.length === 0) {
        // 获取对应的层级 层级跟索引的值相同
        this.addform.cat_level = 0
        // 当selectedOptions的索引等于0的时候,表示没有选择分类.那么就是最高级的分类,那么pid就是对于选择分类数据对于的id
        this.addform.cat_pid = 0
      } else if (this.selectedOptions.length === 1) {
        // 获取对应的层级
        this.addform.cat_level = 1
        // 表示选择了第一层分类选择
        this.addform.cat_pid = this.selectedOptions[0]
      } else if (this.selectedOptions.length === 2) {
        // 获取对应的层级
        this.addform.cat_level = 2
        // 表示选择了第二层分类选择
        this.addform.cat_pid = this.selectedOptions[1]
      }
      addCategories(this.addform)
        .then((res) => {
          // console.log(res)
          if (res.meta.status === 201) {
            this.$message({
              type: 'success',
              message: res.meta.msg
            })
            this.addDialogFormVisible = false
            this.initList()
            this.addform = {}
            this.selectedOptions = []
          } else {
            this.$message({
              type: 'success',
              message: res.meta.msg
            })
          }
        })
    },
    // 3.实现删除分类
    deleteCategory (val) {
      // console.log('delete' + val)
      // this.$confirm('此操作将永久删除数据,确定?', '警告', {
      //   type: 'warning',
      //   callback: (res) => {
      //     if (res === 'confirm') {
      //       deleteCategories(val)
      //         .then((res) => {
      //           console.log(res)
      //           if (res.meta.status === 200) {
      //             this.$message({
      //               type: 'success',
      //               message: res.meta.msg
      //             })
      //             this.initList()
      //           }
      //         })
      //     }
      //   }
      // })
      this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteCategories(val)
            .then((res) => {
              // console.log(res)
              if (res.meta.status === 200) {
                this.$message({
                  type: 'success',
                  message: res.meta.msg
                })
                this.initList()
              } else {
                this.$message({
                  type: 'danger',
                  message: res.meta.msg
                })
              }
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 4.显示编辑的对话框
    editCategory (id) {
      this.editDialogFormVisible = true
      editCategories(id)
        .then((res) => {
          console.log(res)
          this.editform.cat_name = res.data.cat_name
          this.editform.pid = res.data.cat_id
        })
    },
    // 5.修改编辑的数据
    editUserSubmit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          editCategorieslist(this.editform)
            .then((res) => {
              console.log(res)
              if (res.meta.status === 200) {
                this.$message({
                  type: 'success',
                  message: res.meta.msg
                })
                this.initList()
                this.editDialogFormVisible = false
              } else {
                this.$message({
                  type: 'danger',
                  message: res.meta.msg
                })
              }
            })
        }
      })
    },
    // 分页事件:当每页显示的记录数设置变化的时候触发
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.pagesize = val
      // 当每页显示的记录数设置变化的时候触发函数
      this.initList()
    },
    // 分页事件:当当前页码发生变化的时候触发
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.pagenum = val
      // 当用户页码发生改变的时候触发函数
      this.initList()
    }
  },
  mounted () {
    this.initList()
  }
}
</script>
<style lang="scss" scoped>

</style>
